<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="back()">
				<view class="text">
					取消
				</view>
			</view>
			<view class="top-bar-center" @tap="create()">
				<view class="title">
					创建群聊
				</view>
			</view>
			<view class="top-bar-right">
				<view class="pice">
		
				</view>
			</view>
			
		</view>
		
		<view class="main">
			<view class="top">
			<!-- 群头像-->
			<view class="group-img">
				<image-cropper :src="tempFilePath" @confirm="confirm"  @cancel="cancel"></image-cropper>
				<image src="../../static/images/group/change.png" @tap="upload" class="change-img"></image>
				<image :src="cropFilePath" class="img" @tap="upload"></image>
			</view>
			
			<!-- 群名字 -->
			<view class="group-name">
				<input type="text" placeholder="请输入群名称" class="group-name-input" placeholder-style="color:grey;" />
			</view>
			<view class="subtitle">
				好友
			</view>
			</view>
			<!-- 选择用户 -->
			<view class="friends">
				<view class="user" v-for="(item,index) in getFriends" :key="index" @tap="select(item)">
					<view class="selected" :class="{isSelected:item.selected}" >
						<image class="selected-img" src="../../static/images/group/choose.png" v-show="item.selected"></image>
					</view>
					<image :src="item.profilePhoto" mode="" class="user-img"></image>
					<view class="name">
						{{item.nickname}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-bar" @tap="create()">
			<view class="bottom-btn btn1">
				创建群聊
			</view>
		</view>
	</view>
</template>

<script>
	import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue";
	import request from '../../api/request.js';
	import { mapGetters } from 'vuex';
	export default {
		components: {
		    ImageCropper,
		  },
		data() {
			return {
				tempFilePath: "",
				cropFilePath: "../../static/images/group/group.png",
				userList:[]
			}
		},
		onLoad() {
		this.$store.dispatch('getFriends');	
		},
		computed: {
			...mapGetters(['getAcquire', 'getFriends', 'getTotal'])
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			select(item){
				item.selected = !item.selected
			},
			create(){
				uni.showToast({
				    title: '该功能尚未开发！',
				    duration: 2000,
					icon:"none"
				});
			},
			//头像裁剪
			upload() {
			      uni.chooseImage({
			        count: 1, //默认9
			        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			        sourceType: ["album","camera"], //从相册选择
			        success: (res) => {
			          this.tempFilePath = res.tempFilePaths.shift();
			        },
			      });
			    },
			    confirm(e) {
			      this.tempFilePath = "";
			      this.cropFilePath = e.detail.tempFilePath;
			
			      // #ifdef APP-PLUS||MP
			      //除了H5端返回base64数据外，其他端都是返回临时地址，所以你要判断base64还是临时文件名，（用条件编译APP-PLUS||MP执行编译。）
			      //按我这里是先上传裁剪得来的临时文件地址然后得到临时文件名，
			      //待活你要判断是H5还是其他端传给后端类型参数让后端判断执行何种情况代码就OK了
			
			      uni.uploadFile({
			        url: "后端地址上传图片接口地址",
			        filePath: this.cropFilePath,
			        name: "file",
			        fileType: "image",
			        //formData:{},传递参数
			        success: (uploadFileRes) => {
			          var backstr = uploadFileRes.data;
			          //自定义操作
			        },
			
			        fail(e) {
			          console.log("this is errormes " + e.message);
			        },
			      });
			
			      // #endif
			    },
			    cancel() {
			      console.log("canceled");
			      this.tempFilePath = "";
			    },
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";

	.top-bar {
		background-color: rgba(255, 255, 255, 1);
		border-bottom: 1px solid $uni-border-color;
		.top-bar-left{
			float: left;
			padding-left: 32rpx;
			 // background-color: #eee;
			width: 88rpx;
			height: 88rpx;
			.text{
				font-size: $uni-font-size-lg;
				font-weight: 500;
				color: $uni-text-color;
				line-height: 88rpx;
			}
		}
		.title {
			margin-top: env(safe-area-inset-top);
			font-size: 35rpx;
			font-family: PingFangSC-Regular;
			// padding-top: 20rpx;
			line-height: 88rpx;
		}
	}
.main{
	
	display: flex;
	flex-direction: column;
	.top{
		position: fixed;
		padding-top: 118rpx;
		background-color: #fff;
		width: 100%;
		z-index: 100;
	}
	.group-img{
		margin: 0 auto;
		width: 196rpx;
		height: 196rpx;
		background-color: $uni-color-primary;
		box-shadow: 0px 36rpx 40rpx 0px rgba(39,40,50,0.1);
		border-radius: 40rpx;
		overflow: hidden;
		position: relative;
		.img{
			width: 196rpx;
			height: 196rpx;
		}
		.change-img{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 56rpx;
			height: 56rpx;
			margin: auto;
			z-index: 10;
			
		}
	}
	.group-name{
		padding: 62rpx $uni-spacing-col-base 0;
	}
	.group-name-input{
		font-size: 32rpx;
		text-align: center;
		height: 92rpx;
		background-color: $uni-bg-color-grey;
		border-radius: 46rpx;
		font-family: PingFangSC-Regular;
	}
	.subtitle{
		font-family: PingFangSC-Regular;
		padding: $uni-spacing-row-base $uni-spacing-col-base 20rpx;
		font-size: 44rpx;
		font-weight: 600;
		color: #272832;
		line-height: 60rpx;
	}
	.friends{
		padding: 600rpx $uni-spacing-col-base;
		font-family: PingFangSC-Regular;
		// .subtitle{
		// 	font-size: 44rpx;
		// 	font-weight: 600;
		// 	color: #272832;
		// 	line-height: 60rpx;
		// }
		.user{
			display: flex;
			flex-direction: row;
			height: 120rpx;
			align-items: center;
			.selected{
				flex: none;
				width: 48rpx;
				height: 48rpx;
				background-color: rgba(255,228,49,0.5);
				border-radius: 24rpx;
				margin-right: 30rpx;
				position: relative;
				.selected-img{
					height: 20rpx;
					width: 30rpx;
					position: absolute;
					left: 10rpx;
					top: 16rpx;
				}
				
			}
			.isSelected{
				background-color:$uni-color-primary;
			}
			.user-img{
				flex: none;
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
			}
			.name{
				padding-left: 32rpx;
				font-size: 36rpx;
				color: #272832;
				display: -webkit-box;
				 -webkit-box-orient:vertical;
				 -webkit-line-clamp:1;
				 overflow: hidden;
			}
		}
	}
}
.bottom-bar{
	background-color: #fff;
	box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.25);
	.bottom-btn{
		background-color: $uni-color-primary;
		margin: 0 $uni-spacing-col-base;
	}
}

</style>
